<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
				background: #EDECEB;
			}
			
			.mui-content {
				height: 100%;
				background: #EDECEB;
			}
			
			#saveBtn {
				width: 100%;
				background: #FFFFFF;
				margin-bottom: 25px;
				border-radius: 25px;
				height: 45px;
				color: #68BC99;
				border: solid #68BC99 1px;
			}
		</style>

	</head>

	<body>

		<header class="mui-bar mui-bar-nav" style="background: #3A46A1;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"></a>
			<h1 class="mui-center mui-title" style="color: #FFFFFF; font-size: 20px; font-weight: bolder;">SAGAWA</h1>
		</header>

		<div class="mui-content" style=" padding-left: 4%; padding-right: 4%; height: 100%; ">

			<p style="font-size: 16px; color:#FFA6A6A6; margin-top: 15px;"> Order Number:</p>
			<input type="text" class=" mui-input mui-input-clear" v-model="orderNo" readonly="true">

			<p style="font-size: 16px; color:#FFA6A6A6;">Pickup Address:</p>
			<input id="pickupAddress" type="text" class="mui-input-clear mui-input" v-model="pickupAddress">

			<p style="font-size: 16px; color:#FFA6A6A6;"> Pickup Date:</p>
			<input id="pickupDate" type="text" class="mui-input-clear mui-input" v-model="pickupDate">

			<p style="font-size: 16px; color:#FFA6A6A6;"> Time Solt:</p>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">{{timeslot}}</a>
					<div class="mui-collapse-content">
						<p>09:00-11:00</p>
						<p>11:00-13:00</p>
						<p>13:00-15:00</p>
						<p>15:00-17:00</p>
						<p>17:00-19:00</p>
						<p>19:00-21:00</p>
					</div>
				</li>
			</ul>

			<p style="font-size: 16px; color:#FFA6A6A6;"> Pickup Remarks:</p>
			<input id="pickupRemark" type="text" class="mui-input-clear mui-input" v-model="pickupRemaek">

			<p style="font-size: 16px; color:#FFA6A6A6;"> Services Type:</p>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">{{deliveryType}}</a>
					<div class="mui-collapse-content">
						<p>Same Day Delivery</p>
						<p>Next Day Delivery</p>
						<p>next 2 Days Delivery</p>
					</div>

				</li>
			</ul>

			<p style="font-size: 16px; color:#FFA6A6A6; margin-top: 15px;">Delivery Address1:</p>
			<input type="text" class="mui-input-clear mui-input" v-model="deliveryAddress1">

			<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Address2:</p>
			<input type="text" class="mui-input-clear mui-input" v-model="deliveryAddress2">

			<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Postal Code:</p>
			<input type="text" class="mui-input-clear mui-input" v-model="postalCode">

			<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Attention:</p>
			<input type="text" class="mui-input-clear mui-input" v-model="deliveryAtten">

			<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Tel:</p>
			<input type="text" class="mui-input-clear mui-input" v-model="deliveryTel">

			<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Remarks:</p>
			<input type="text" class="mui-input-clear mui-input" v-model="deliveryRemark">

			<button id="saveBtn" type="button" class="mui-btn mui-btn-outlined">SAVE</button>

		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/http.js"></script>
		<script type="text/javascript">
			(function($, doc) {
				var self = plus.webview.currentWebview();
				var orderno = self.orderNo;
				console.log("orderno-----> " + orderno);

				var saveBtn = doc.getElementById("saveBtn");

				var orderDetail = new Vue({
					el: '.mui-content',
					data: {
						orderNo: "",
						pickupDate: "",
						pickupAddress: "",
						timeslot: "",
						pickupRemaek: "",
						deliveryAddress1: "",
						deliveryAddress2: "",
						postalCode: "",
						deliveryAtten: "",
						deliveryTel: "",
						deliveryRemark: "",
						deliveryType: ""
					}
				});

				var detail = null;
				var getOrderDetail = function() {

					var postdata = {
						orderNo: orderno,
						token: 'f416b7333f412805f5f1def594bdcf93'
					};
					http.asyncHttp('getOrderDetails.jsp', postdata, function(result) {
							console.log("请求detail数据----> \r\n" + result);
							if(result == "" || result == null) {
								return;
							}
							detail = JSON.parse(result);

							orderDetail.orderNo = detail.orderNo;
							orderDetail.pickupDate = detail.pickupdate;
							orderDetail.pickupAddress = detail.pickupaddrl1 + ", " + detail.pickupaddrl2;
							orderDetail.timeslot = detail.timeslot;
							if(detail.pkremarks == "" || detail.pkremarks == null) {
								orderDetail.pickupRemaek = "no remarks";
							} else {
								orderDetail.pickupRemaek = detail.pkremarks;
							}
							orderDetail.deliveryType = detail.deliveryType

							orderDetail.deliveryAddress1 = detail.deliveryaddrl1;
							orderDetail.deliveryAddress2 = detail.deliveryaddrl2;
							orderDetail.postalCode = detail.dvpostalcode;
							orderDetail.deliveryAtten = detail.dvcontact;
							orderDetail.deliveryTel = detail.dvcontactno;
							if(detail.dvremarks == "" || detail.dvremarks == null) {
								orderDetail.deliveryRemark = "no remarks";
							} else {
								orderDetail.deliveryRemark = detail.dvremarks;
							}

						},
						function(err) {
							plus.nativeUI.toast("请求出错了");

						});
				};

				var saveOrder = function() {

					var postdata = {
						orderno: orderno,
						pickupdate: pickupdate,
						pickupaddrl1: pickupaddrl1,
						pickupaddrl2: pickupaddrl2,
						pickupaddrl3: pickupaddrl3,
						pkremarks: pkremarks,
						timeslot: timeslot,
						deliveryaddrl1: deliveryaddrl1,
						deliveryaddrl2: deliveryaddrl2,
						dvpostalcode: dvpostalcode,
						dvcontact: dvcontact,
						dvcontactno: dvcontactno,
						dvremarks: dvremarks,
						deliveryType: deliveryType,
						token: 'f416b7333f412805f5f1def594bdcf93'
					};

					http.asyncHttp('updateMerchant.jsp', postdata, function(result) {
							console.log("请求detail数据----> \r\n" + result);
							if(result == "" || result == null) {
								plus.nativeUI.toast("update failed");
								return;
							}

						},
						function(err) {
							plus.nativeUI.toast("请求出错了");

						});
				};

				//获取订单详情
				getOrderDetail();

				saveBtn.addEventListener("tap", function(event) {
					saveOrder();
				});

			}(mui, document));
		</script>
	</body>

</html>